<template>
  <div class="viewDetail">
    <div class="viewDetail-title flex pl-16 bg_fff c_text2">
      <el-popover trigger="hover">
        <div>
          <div class="flex aligncenter mb-10">
            <i class="el-icon-info mr-10 f-16 c_warning"></i>
            生效群需要在单号模式下设置
          </div>
          <div class="flexend">
            <el-button class="" type="primary" size="mini">前往设置</el-button>
          </div>
        </div>
        <div
          slot="reference"
          class="tab-item commhover hovernot c_text4 mr-26"
          :class="{ active: activetab == 2 }"
        >
          生效群
        </div>
      </el-popover>
      <div
        class="tab-item commhover"
        :class="{ active: activetab == 1 }"
        @click="handleTab(1)"
      >
        规则设置
      </div>
    </div>
    <div class="viewDetail-big">
      <div class="mytips_error mytips_warning2 mb-20">
        <i class="el-icon-warning f-14 c_warning mr-8 line_h_22"></i>
        <div class="flex line_h_22">
          如何使用：设置规则 → 点击“<span class="c_primary">保存并应用配置</span
          >”，选择相关企微号前往“<span class="c_primary">单号模式-自动踢人</span
          >”选择需要生效的群
        </div>
      </div>
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="100px"
        label-position="left"
        size="small"
      >
        <el-form-item label="生效时间：">
          <div class="flex algincenter">
            <el-form-item prop="date1" class="mb-0">
              <el-time-picker
                type="date"
                placeholder="选择日期"
                v-model="form.date1"
                style="width: 124px"
              ></el-time-picker>
            </el-form-item>
            <div class="plr-16">~</div>
            <el-form-item prop="date2" class="mb-0">
              <el-time-picker
                placeholder="选择时间"
                v-model="form.date2"
                style="width: 124px"
              ></el-time-picker>
            </el-form-item>
            <div class="ml-10 c_text">每日00:00至23:59生效</div>
          </div>
        </el-form-item>
        <el-form-item label="" label-width="0">
          <el-checkbox-group v-model="form.checkList" class="flex">
            <div
              v-for="(item, index) in checklist"
              :key="index"
              class="checkox flex aligncenter commhover"
              :class="{ active: activecheck == item.value }"
              @click="handleItem(item)"
            >
              <el-checkbox :label="item.value">
                {{ item.label }}
              </el-checkbox>
              <span class="f-12 c_text3 ml-12">{{ item.info }}</span>
            </div>
          </el-checkbox-group>
        </el-form-item>
        <div class="mytips_error mb-20" style="background-color: #f3f7ff">
          <span class="fw-6 line_h_22 pr-8">{{ checkItem.label }}</span>
          <div class="flex f-12 c_text3 line_h_22">
            {{ checkItem.detail }}
            <GiveExample
              v-if="checkItem.value !== 1"
              content="https://s.yezgea02.com/common/0LgeFN.png"
              class="ml-8"
            />
          </div>
        </div>
        <el-form-item v-show="activecheck == 2" label="踢人话术：">
          <el-input v-model="form.reply" type="textarea" rows="6" />
        </el-form-item>
        <div v-show="activecheck == 3">
          <el-form-item label="警告次数：">
            <span class="c_text">
              警告违规群成员
              <el-input
                size="small"
                v-model="form.number1"
                class="mlr-6"
                @blur="handleBlurNumber('number1', 999)"
                style="width: 50px"
              />
              次后踢出群，
              <el-input
                size="small"
                v-model="form.number1"
                class="mlr-6"
                @blur="handleBlurNumber('number1', 7)"
                style="width: 50px"
              />
              <el-select
                v-model="form.day"
                placeholder=""
                class="mlr-6"
                style="width: 80px"
              >
                <el-option
                  v-for="(item, index) in dayList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              内无违规，清除警告次数
            </span>
          </el-form-item>
        </div>
        <el-form-item
          v-show="activecheck == 3 || activecheck == 4"
          label="警告话术："
        >
          <el-input v-model="form.reply" type="textarea" rows="6" />
        </el-form-item>
        <el-form-item v-show="activecheck == 3" label="踢人话术：">
          <el-input v-model="form.reply" type="textarea" rows="6" />
        </el-form-item>
        <el-form-item label="关键词触发：">
          <el-checkbox-group v-model="form.keyword_type">
            <div class="kickbox br_4 mb-20">
              <div class="kickb_header flex aligncenter plr-12 bg_fff">
                <el-checkbox :label="1">
                  <span class="c_text">消息关键词</span>
                </el-checkbox>
              </div>
              <div class="kick_body bg_f7f7f7 p-12">
                <el-form-item prop="checked" class="mb-0">
                  <SetKeyword
                    v-model="form.mh_keyword"
                    title="设置模糊关键词"
                  />
                </el-form-item>
                <el-form-item prop="checked" class="mb-0">
                  <SetKeyword
                    v-model="form.jz_keyword"
                    title="设置精准关键词"
                  />
                </el-form-item>
              </div>
            </div>
            <div class="kickbox br_4">
              <div class="kickb_header flex aligncenter plr-12 bg_fff">
                <el-checkbox :label="2">
                  <div class="flex aligncenter">
                    <span class="c_text"
                      >昵称关键词（昵称中包含以下关键词将会被触发）</span
                    >
                    <GiveExample
                      content="https://s.yezgea02.com/common/jvpygY.png"
                      class="ml-8"
                      height='360px'
                    />
                    <!-- <GiveExample class="ml-8">
                      <div slot="content">

                      </div>
                    </GiveExample> -->
                  </div>
                </el-checkbox>
              </div>
              <div class="kick_body bg_f7f7f7 p-12">
                <el-form-item prop="checked" class="mb-0">
                  <SetKeyword
                    v-model="form.mh_keyword"
                    title="设置模糊关键词"
                  />
                </el-form-item>
                <el-form-item prop="checked" class="mb-0">
                  <SetKeyword
                    v-model="form.jz_keyword"
                    title="设置精准关键词"
                  />
                </el-form-item>
              </div>
            </div>
          </el-checkbox-group>
        </el-form-item>
        <!-- 直接踢人 -->
        <div v-show="activecheck == 1">
          <el-form-item label="微信类型：">
            <div class="kickbox br_4 mb-20">
              <div class="kickb_header flex aligncenter plr-12 bg_fff">
                <el-form-item prop="checked" class="mb-0">
                  <el-checkbox v-model="form.checked">
                    <span class="c_text">踢非白名单企业的企业微信</span>
                  </el-checkbox>
                </el-form-item>
              </div>
              <div class="kick_body bg_f7f7f7 p-12">
                <div class="line_h_22">
                  ID下登录的企业自动默认为白名单企业，<span
                    class="c_primary commhover"
                    @click="goPage('企业管理')"
                    >查看详情</span
                  >
                </div>
                <div class="line_h_22">
                  白名单企业需至左上角
                  <span class="c_primary commhover" @click="handlewhite"
                    >【白名单】</span
                  >
                  处设置
                </div>
                <div class="line_h_22">
                  如需踢黑名单企业的企业微信，请使用<span
                    class="c_primary commhover"
                    @click="goPage('blackAndWhiteMgt')"
                    >【黑名单-根据企业自动添加】</span
                  >功能
                </div>
              </div>
            </div>
          </el-form-item>
        </div>
        <el-form-item label="其他触发：">
          <div class="flex alignstart">
            <div class="kickbox br_4">
              <div class="kickb_header flex aligncenter plr-12 bg_fff">
                <span class="fw-6 pr-10">发广告</span>
                <span class="c_text3 f-12"> 消息中包含以下类型将会被惩罚</span>
                <GiveExample
                  content="https://s.yezgea02.com/common/yfqYo8.png"
                  class="ml-8"
                  height='360px'
                />
              </div>
              <div class="kick_body bg_f7f7f7 p-12">
                <el-form-item prop="checked" class="mb-0">
                  <el-checkbox-group v-model="form.adv" class="flexcolumn">
                    <el-checkbox
                      v-for="(item, index) in advList"
                      :key="index"
                      :label="item.value"
                    >
                      <div class="flex aligncenter">
                        <span>{{ item.label }}</span>
                        <el-tooltip
                          effect="dark"
                          placement="top"
                          popper-class="commtooltip"
                        >
                          <div slot="content">
                            {{ item.info }}
                          </div>
                          <svg-icon
                            v-if="item.info"
                            icon-class="iquestion"
                            class-name="c_888999 f-15 ml-5"
                          />
                        </el-tooltip>
                      </div>
                    </el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </div>
            </div>
            <div class="kickbox br_4 ml-10">
              <div class="kickb_header flex aligncenter plr-12 bg_fff">
                <span class="fw-6 pr-10">发骚扰消息</span>
                <span class="c_text3 f-12"> 消息满足以下情况将会被惩罚</span>
                <GiveExample
                  content="https://s.yezgea02.com/common/kJNYbV.png"
                  class="ml-8"
                  height='400px'
                />
              </div>
              <div class="kick_body bg_f7f7f7 p-12">
                <div class="zgborder mb-10">
                  <div class="mb-6">炸群</div>
                  <el-form-item prop="zgroup" class="mb-0">
                    <el-checkbox-group v-model="form.zgroup" class="flexcolumn">
                      <el-checkbox :label="1" class="mb-10">
                        <span class="c_text">
                          消息大于
                          <el-input
                            size="small"
                            v-model="form.number1"
                            class="mlr-6"
                            @blur="handleBlurNumber('number1', 999)"
                            style="width: 60px"
                          />
                          行
                        </span>
                      </el-checkbox>
                      <el-checkbox :label="2" class="mb-16">
                        <span class="c_text">
                          字符大于
                          <el-input
                            size="small"
                            v-model="form.number2"
                            class="mlr-6"
                            @blur="handleBlurNumber('number2', 999)"
                            style="width: 60px"
                          />
                          字
                        </span>
                      </el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </div>
                <div class="mb-6">刷屏</div>
                <el-form-item prop="zgroup" class="mb-0">
                  <el-checkbox-group v-model="form.zgroup" class="flexcolumn">
                    <el-checkbox :label="1" class="mb-10">
                      <span class="c_text">
                        <el-input
                          size="small"
                          v-model="form.number1"
                          class="mlr-6"
                          @blur="handleBlurNumber('number1', 999)"
                          style="width: 60px"
                        />
                        秒发送
                        <el-input
                          size="small"
                          v-model="form.number1"
                          class="mlr-6"
                          @blur="handleBlurNumber('number1', 999)"
                          style="width: 60px"
                        />
                        条消息
                      </span>
                    </el-checkbox>
                    <el-checkbox :label="2" class="mb-16">
                      <span class="c_text">
                        <el-input
                          size="small"
                          v-model="form.number2"
                          class="mlr-6"
                          @blur="handleBlurNumber('number2', 999)"
                          style="width: 60px"
                        />
                        秒发送
                        <el-input
                          size="small"
                          v-model="form.number2"
                          class="mlr-6"
                          @blur="handleBlurNumber('number2', 999)"
                          style="width: 60px"
                        />
                        条表情
                      </span>
                    </el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </div>
            </div>
          </div>
        </el-form-item>
        <div v-show="activecheck == 1 || activecheck == 2">
          <el-form-item label="撤回免踢：">
            <div class="flex aligncenter">
              <el-switch
                v-model="form.status"
                inactive-color="#BFBFBF"
                :active-value="1"
                :inactive-value="0"
              >
              </el-switch>
              <span class="pl-10 c_text">消息撤回后不满足设置条件不触发</span>
              <GiveExample
                content="https://s.yezgea02.com/common/YEkfYT.png"
                class="ml-8"
                height='360px'
              />
            </div>
          </el-form-item>
          <el-form-item label="免罚时间：">
            <span class="c_text">
              <el-input
                size="small"
                v-model="form.number1"
                class="mr-6"
                @blur="handleBlurNumber('number1', 999)"
                style="width: 60px"
              />
              秒内撤回消息，则不踢人
            </span>
          </el-form-item>
          <el-form-item label="提醒话术：">
            <!-- <el-input v-model="form.reply" type="textarea" rows="6" /> -->
            <EditorPro
              :toolTags="toolTags"
              :options="{ placeholder: '请输入' }"
              :hideFooter='true'
              :havecopy='true'
            />
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="greetfoot flexcenter bg_fff p-12">
      <el-button v-hasPermi="['system:autokick:save']" type="primary" size="small" @click="handleSave"
        >保存配置</el-button
      >
      <el-button
        v-hasPermi="['system:autokick:savetouse']"
        type="warning"
        size="small"
        @click="saveApplicate"
        class="mr-10"
        >保存并应用配置</el-button
      >
      <el-checkbox v-model="form.checked">踢出后进入黑名单</el-checkbox>
      <el-checkbox v-model="form.checked"
        >邀请者也一起踢出群聊
        <el-tooltip effect="dark" placement="top" popper-class="commtooltip">
          <div slot="content">
            连带直接邀请者一起踢出，如果邀请<br />者为群管理员、群主、白名单用户或<br />者企业内部成员则不踢
          </div>
          <svg-icon icon-class="iquestion" class-name="c_888999 f-15 ml-5" />
        </el-tooltip>
      </el-checkbox>
    </div>
    <select-wechat v-if="showWechat" :visableIf.sync="showWechat" />
  </div>
</template>

<script>
//import {listUser, delUser,} from "@/api/system/user";
import GroupForm from "@/components/UserGroupComp/components/GroupForm";
import { listUser } from "@/api/system/user";
import GiveExample from "@/components/GiveExample";
import SetKeyword from "@/components/SetKeyword";

import MaterialContent from "@/components/MaterialContent";
import MaterialContentGroup from "@/components/MaterialContentGroup";
import SelectWechat from "@/components/UserGroupComp/SelectWechat.vue";
import AddKeyword from "@/components/AddKeyword";
import LabelTextarea from "@/components/LabelTextarea";
import MultipleSelect from "@/components/MultipleSelect/index.vue";
import EditorPro from "@/components/EditorPro";

export default {
  name: "addOrEditUserOperations",
  components: {
    GiveExample,
    SetKeyword,

    GroupForm,
    MaterialContent,
    MaterialContentGroup,
    SelectWechat,
    AddKeyword,
    LabelTextarea,
    MultipleSelect,
    EditorPro,
  },
  data() {
    return {
      activetab: 1, //当前选中
      checklist: [
        {
          value: 1,
          label: "直接踢人",
          info: "优先级：最高",
          detail: "群成员触犯规则，直接踢出群聊，可设置免罚时间内撤回不踢出",
        },
        {
          value: 2,
          label: "踢人+警告",
          info: "优先级：高",
          detail:
            "群成员触犯规则，直接踢出群聊，并在群内警告其他成员，可设置免罚时间内撤回消息不踢出",
        },
        {
          value: 3,
          label: "警告N次后踢人",
          info: "优先级：中",
          detail: "警告触发规则的群成员N次后将其踢出群",
        },
        {
          value: 4,
          label: "只警告",
          info: "优先级：低",
          detail: "触发规则后，发送下面设置的警告内容，不踢人",
        },
      ],
      checkItem: null,
      activecheck: 1,
      form: {
        type: 1,
        name: "",
        checkList: [],
        keyword_type: [],
        mh_keyword: [],
        jz_keyword: [],
        adv: [],
        zgroup: [],
        checked: false,
        condition: 1,
        exclude: 0,
        wqLables: [], //企微标签
        ex_wqLables: [], //排除企微标签
        znLables: [], //智能标签
        ex_znLables: [], //排除智能标签
        selectType: 1,
        num: 500,
      },
      rules: {
        name: [{ required: true, message: "请输入标签名称", trigger: "blur" }],
      },
      advList: [
        { value: 1, label: "二维码" },
        { value: 2, label: "名片" },
        { value: 3, label: "小视频" },
        {
          value: 4,
          label: "网址分享",
          info: "链接白名单，请到“自动踢人-白名单”中添加",
        },
        {
          value: 5,
          label: "小程序",
          info: "小程序白名单，请到“自动踢人-白名单”中添加",
        },
        {
          value: 6,
          label: "视频号",
          info: "视频号白名单，请到“自动踢人-白名单”中添加",
        },
        { value: 7, label: "红包" },
        { value: 8, label: "聊天合集" },
        {
          value: 9,
          label: "小程序码",
          info: "不能识别是哪个小程序，只要是小程序太阳码全部都会被踢",
        },
        { value: 10, label: "文件" },
        { value: 11, label: "接龙" },
      ],
      dayList: [
        { label: "天", value: 1 },
        { label: "小时", value: 2 },
        { label: "分钟", value: 3 },
        { label: "秒", value: 4 },
      ],
      showWechat: false,
      tagList: [
        { name: "称呼/昵称", value: "{{称呼/昵称}}" },
        { name: "当前备注", value: "{{当前备注}}" },
      ],
      lableOpt: [
        { value: 1, label: "客户等级", children: ["一般", "重要", "核心"] },
        { value: 2, label: "客户等级2", children: ["一般2", "重要2", "核心2"] },
      ],
      ciList: [2, 3, 4, 5, 6, 7],
      toolTags: ["随机表情", "昵称", "违规原因", "@昵称"],
    };
  },
  props: {
    info: {
      type: Object,
      default: {},
    },
  },
  created() {
    if (this.info) {
      this.form.name = this.info.planName;
    }
    this.checkItem = this.checklist[0];
  },
  methods: {
    handleTab(type) {
      this.activetab = type;
    },

    handleItem(item) {
      this.activecheck = item.value;
      this.checkItem = item;
    },

    handleBlurNumber(type, maxnumber) {
      // 使用正则表达式匹配正整数
      const regex = /^[1-9]\d*$/;
      // 如果输入的值不是正整数，则将其设置为上一个有效值
      if (!regex.test(this.form[type])) {
        this.form[type] = maxnumber;
      } else {
        if (this.form[type] > 500) {
          this.form[type] = maxnumber;
        }
      }
    },
    // /** 查询用户列表 */
    // getList() {
    //   this.loading = true;
    //   listUser(this.addDateRange(this.queryParams, this.dateRange)).then(
    //     (response) => {
    //       this.tableDataList = response.rows;
    //       this.total = response.total;
    //       this.loading = false;
    //     }
    //   );
    // },
    /** 搜索按钮操作 */
    // handleQuery() {
    //   this.queryParams.pageNum = 1;
    //   this.getList();
    // },

    saveApplicate() {
      this.showWechat = true;
    },

    handleSave() {
      console.log("this.form:", this.form);
    },

    handlewhite() {
      this.$emit("handlewhite");
    },

    goPage(name) {
      this.$router.push({ name });
    },
  },
};
</script>
<style lang="scss" scoped>
.viewDetail {
  height: 100%;
  position: relative;
  // overflow-y: auto;
  .viewDetail-title {
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #e9e9e9;
    .tab-item {
      height: 100%;
      border-bottom: 2px solid transparent;
      &.active {
        color: #3070ff;
        border-bottom-color: #3070ff;
      }
    }
  }
  .el-form-item {
    margin-bottom: 20px;
  }
}
.viewDetail-big {
  height: calc(100vh - 200px);
  overflow-y: auto;
  padding: 20px;
}
.kickbox {
  border: 1px solid #e9e9e9;
  overflow: hidden;
  .kickb_header {
    min-height: 36px;
  }
}
.greetfoot {
  border-top: 1px solid #e9e9e9;
  position: sticky;
  bottom: 0;
  z-index: 999;
}
.checkox {
  border-color: #e9e9e9;
  border-style: solid;
  border-width: 1px 1px 1px 0;
  margin: 0;
  padding: 0 15px;
  height: 40px;
  position: relative;
  &:first-child {
    border-left: 1px solid #e9e9e9;
    border-radius: 4px 0 0 4px;
  }
  &:last-child {
    border-radius: 0 4px 4px 0;
  }
  &.active {
    border-color: #5993ff;
  }
  &.active:not(:first-child):before {
    position: absolute;
    top: -1px;
    left: -1px;
    display: block;
    box-sizing: content-box;
    width: 1px;
    height: 100%;
    padding: 1px 0;
    background-color: #3070ff;
    transition: background-color 0.3s;
    content: "";
  }
}
.zgborder {
  border-bottom: 1px solid #e9e9e9;
}
</style>
